<template>
    <div class="order-container">
        <el-table
            :data="orderData"
            border
            style="width: 100%">
            <el-table-column
                prop="orderDetail"
                label="产品图片"
                width="130">
                <!-- 插槽作用域 -->
                <template v-slot="scope">
                    <img :src="scope.row.orderDetail[0].imageUrl" alt="" width="80px">

                    <!-- <el-avatar
                        fit="scale-down" 
                        shape="square" 
                        :size="80" 
                        :src="scope.row.orderDetail[0].imageUrl">
                    </el-avatar>  -->
                </template>
            </el-table-column>
            <el-table-column
                prop="order_id"
                label="订单编号"
                width="250">
            </el-table-column>
            <el-table-column
                prop="orderDetail[0].productName"
                label="产品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="orderDetail[0].quantity"
                label="数量"
                width="100">
            </el-table-column>
            <el-table-column
                prop="total_fee"
                label="总价格"
                width="100">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="创建时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="pay_status"
                label="支付状态"
                width="100">
                <template v-slot="{row}">
                    {{row.pay_status === 1 ? '已支付' : '未支付'}}
                </template>
            </el-table-column>
            <el-table-column
                prop="order_status"
                label="订单状态"
                width="100">
                <template v-slot="{row}">
                    <span v-if="row.order_status == 0">未提交</span>
                    <span v-else-if="row.order_status == 1">提交成功</span>
                    <span v-else-if="row.order_status == 2">已经取消</span>
                    <span v-else-if="row.order_status == 3">无效订单</span>
                    <span v-else-if="row.order_status == 4">交易关闭</span>
                    <span v-else-if="row.order_status == 5">退货</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="opration"
                label="操作">
                <template v-slot="{row}">
                    <el-button
                        type="primary"
                        v-hasPay="[row.pay_status,row.order_status]"
                        icon="iconfont icon-chongzhi">
                        <!-- <i class="iconfont icon-chongzhi"></i> -->
                        去支付
                    </el-button>
                    <el-button
                        type="danger"
                        icon="el-icon-delete">
                        <!-- <i class="el-icon-delete"></i> -->
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>


<script>
  import * as api from "../../../../api/transaction"
  export default {
    meta: {
        title: 'order',
        name:"订单管理",
        icon: 'iconfont icon-dd'
    },
    data() {
      return {
        orderData:[]

      }
    },
    created () {
        //获取数据方法一
        // api.getOrderApi()
        // .then(res => {
        //     console.log(res);
        //     this.orderData = res.data.data
        // })

        //获取订单
        this.getOrderList()
    },
    methods: {
        getOrderList(){
            api.getOrderApi()
            .then(res => {
                // console.log(res);
                this.orderData = res.data.data
            })
        }
    },
    //自定义指令
    directives: {
        hasPay:{
            inserted(el,binding){
                // console.log(binding);
				//指令接收的是用户的支付状态
				//0未支付 显示去支付按钮
				//1已支付 禁用去支付按钮
				//接收到的参数是一个数组 [pay_status,order_status]
                let [pay_status,order_status] = binding.value;
                //先保存当前按钮的类名
                let className = el.className;
                //当pay_status不是0 的时候
				//order_status不是1的时候
				//禁用按钮
				//order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
                if(pay_status !== 0 || order_status !== 1){
                    el.disabled = true;//禁用按钮
                    el.className = className + " " + "is-disabled";
                }
            }
        }
    }
  }
</script>

<style lang="less" scoped>
/deep/ .el-table .el-table__cell{
    text-align: center;
}
// /deep/ .el-button--default{
//     background-color: #05a000;
//     color: white;
// }
// /deep/ .el-button--default:nth-of-type(1){
//     color: #fff;
//     background-color: #a0cfff;
//     border-color: #a0cfff;
// }
// /deep/ .el-button--default:nth-of-type(2){
//     color: #fff;
//     background-color: #f56c6c;
//     border-color: #f56c6c;
// }
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
</style>